<template>
  <div>
    <!--当有多个状态切换时;且最终同一时刻只能显示一个状态对应的界面时
      v-if系列 比 v-show好用-->

    <p v-if="showTip" style="font-size: 40px;color: hotpink;text-align: center">请输入查询的用户</p>
    <p v-else-if="showLoding" style="font-size: 40px;color: deeppink;text-align: center">loading...</p>
    <p v-else-if="showNoBody" style="font-size: 40px;color: deeppink;text-align: center">查无此人</p>
    <div class="row" v-else>
      <div class="card" v-for="item in cardList" :key="item.id">
        <a :href="item.rep" target="_blank">
          <img :src="item.avatar" style='width: 100px'/>
        </a>
        <p class="card-text">{{item.userName}}</p>
      </div>
    </div>
  </div>
</template>

<script>
    import {mapState} from "vuex"
    export default {
        name: "list",
        computed:{
          ...mapState(["cardList","showTip","showLoding","showNoBody"])
        },
        mounted(){
          //哪个组件需要数据 就在哪个组件中注册事件
          this.$bus.$on("search",async (searchName)=>{
            //拿到searchName发送请求 拿回后台接口对应的数据

            //让tip隐藏掉
            this.showTip = false;
            //让loading显示出来
            this.showLoding = true;


            //data:
            // incomplete_results: false
            // items: (30) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
            // item: {login,html_url,avatar_url}
            // total_count: 558
            // 有没有可能项目启动时;接口还没有完善? 接口中数据的命名还没有确定! 这边应该要借助map方法
            const {items} =  await this.$http.get("/search/users",{
              params:{
                q:searchName
              }
            })
            //map方法返回一个新的数组 数组中的每一项是回调函数每一次返回的值
            //[{rep,avatar,userName},{}]
            this.cardList = items.map((item)=>{
              return {
                rep:item.html_url,
                avatar:item.avatar_url,
                userName:item.login
              }
            });

            //让列表显示
            this.showLoding = false;
          })
        }
    }
</script>

<style scoped>

</style>
